<template>
		<!-- 用户列表 -->
		<up-skeleton title avatar :loading="props.loading" v-for="(user, index) in props.userList"
			:key="user.id">
			<up-card padding='0rpx' :foot-border-top="false" :head-border-bottom='false'
				class="user-card">
				<template #body>
					<view class="card-body">

						<view class="u-body-item u-flex u-col-between u-p-t-0">
							<view class="gender">
								{{ user.gender === 0 ? '男' : '女' }}
							</view>
							<image
								:src="user.avatarUrl"
								mode="aspectFill" class="avatar"></image>
							<view class="u-body-item-title">
								<view class="username">{{ user.username }}</view>
								<view class="user-profile">{{ user.userProfile }}</view>
								<view class="tags-container">
									<up-tag
										v-for="tag in user.tags"
										:key="tag"
										plain
										size="mini"
										type="warning"
										class="tag">
										{{ tag }}
									</up-tag>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template #foot>
					<view class="footer">
						<up-button @click="showPopup(index)">联系我</up-button>
					</view>
				</template>
			</up-card>
		</up-skeleton>

		<!-- 无符合用户 -->
		<!-- <up-empty v-if="!props.userList || props.userList.length < 1" text="无符合的用户" /> -->

		<!-- 弹出层 -->
		<up-popup :show="show" :round="10" mode="center" @close="close">
			<view class="popup-content">
				<view class="popup-item">
					<text class="popup-label">邮箱：</text>
					<text>{{ props.userList[userIndex]?.email || '保密' }}</text>
				</view>
				<view class="popup-item">
					<text class="popup-label">电话：</text>
					<text>{{ props.userList[userIndex]?.phone || '保密' }}</text>
				</view>
			</view>
		</up-popup>

</template>

<script setup lang="ts">
	import type { userType } from "@/models/user";
	import { ref, watchEffect } from "vue";

	const show = ref(false)
	const userIndex = ref(0)

	interface UserCardListProps {
		loading : boolean
		userList : userType[];
	}

	const props = withDefaults(defineProps<UserCardListProps>(), {
		//@ts-ignore
		userList: [] as userType[],
	});
	//用户信息标签字符串化
	const loadDate = () => {
		if (props.userList) {
			props.userList.forEach((user : userType) => {
				if (user.tags) {
					user.tags = JSON.parse(user.tags);
				}
			})
		}
	}

	const showPopup = (index : number) => {
		show.value = true;
		userIndex.value = index
	}
	const close=()=>{
		show.value = false
	}
	watchEffect(() => {
		loadDate();
	})
</script>

<style scoped>
	.user-card {
		margin-bottom: 15px;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		background-color: #f6f8fa;
	}

	.card-body {
		padding: 15px;
	}

	.gender {
		position: absolute;
		top: 10px;
		left: 10px;
		z-index: 1;
		color: #fff;
		width: 40px;
		text-align: center;
		background-color: #1a8afc;
		border-radius: 5px;
		padding: 2px 5px;
	}

	.avatar {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		margin-right: 15px;
	}

	.u-body-item-title {
		flex: 1;
	}

	.username {
		font-weight: bold;
		font-size: 18px;
		color: #333;
		margin-top: 5px;
	}

	.user-profile {
		color: #666;
		margin-top: 3px;
		font-size: 14px;
	}

	.tags-container {
		margin-top: 8px;
	}

	.tag {
		margin: 5px 5px 0 0;
	}

	.footer {
		display: flex;
		justify-content: flex-end;
		padding: 10px;
	}

	.popup-content {
		padding: 20px;
	}

	.popup-item {
		margin-bottom: 10px;
	}

	.popup-label {
		font-weight: bold;
	}
</style>